<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('消息通知') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('标题')" prop="title">
        <el-input
          v-model="queryParams.title"
          size="small"
          :placeholder="$t('标题')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item :label="$t('是否已读')" prop="status">
        <dictSelect
          v-model="queryParams.status"
          size="small"
          :clearable="true"
          dictionary="is_read"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
        <el-button icon="el-icon-chat-round" type="info" size="mini" @click="updataOneKeyRead">{{ $t("一键已读") }}</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="msgBaseList" border>
      <el-table-column type="expand">
        <template slot-scope="scope">
          <div class="pad">
            <div class="con" v-html="scope.row.content" />
            <UserSelect
              v-model="scope.row.userIds"
              size="small"
              clearable
              :popper-append-to-body="true"
              :multiple="true"
              :placeholder="$t('选择用户')"
            />
            <el-input v-model="scope.row.remark" type="textarea" :placeholder="$t('内容')" show-word-limit maxlength="2000" />
            <div style="margin: 10px 0 0;text-align: right;cursor: pointer;" @click="save(scope.row, scope.$index)">{{ $t('发送') }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('标题')" align="left" prop="title">
        <template slot-scope="scope">
          <span v-show="scope.row.status === 'N'" class="no" />
          <el-link type="primary" @click="updateHandle(scope.row)">{{ scope.row.title }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('发送人')" align="center" prop="createBy.nickName" width="100" />
      <el-table-column :label="$t('发送时间')" align="center" prop="createTime" width="150">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime,'{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog
      :title="title"
      :visible.sync="formOpen"
      style="display:none;"
      :close-on-click-modal="false"
      custom-class="msgDialogButton"
      :lock-scroll="false"
      append-to-body
      :before-close="handleDialogClose"
    >
      <msgBaseForm ref="msgBaseForm" @isShowPage="isShowPage" />
    </el-dialog>
    <el-dialog
      :title="title"
      :visible.sync="otherOpen"
      :close-on-click-modal="false"
      :lock-scroll="false"
      custom-class="msgDialog"
      append-to-body
      :before-close="handleDialogClose"
    >
      <component :is="formPath" ref="formPath" />
    </el-dialog>

  </div>
</template>

<script>
import { listMsgBase, updataOneKeyReadMsgBase, nextUnreadMsg, saveMsgBase } from '@/api/system/message/msgBase'
import msgBaseForm from './msgBaseForm.vue'
import { getAsyncComponent } from '@/utils'
export default {
  components: {
      msgBaseForm
  },
  data() {
      return {
          // 遮罩层
          loading: true,
          // 总条数
          total: 0,
          otherOpen: false,
          // 系统消息表格数据
          msgBaseList: [],
          title: '',
          // 是否显示弹出层
          formOpen: false,
          // 已读未读字典
          isReadOptions: [],
          formPath: '',
          // 查询参数
          queryParams: {
              userId: undefined,
              title: undefined,
              content: undefined,
              status: undefined,
              component: undefined,
              dataId: undefined,
              pageNum: 1,
              pageSize: 10
          },
          form: {
            content: '',
            primaryId: '',
            title: '',
            type: '',
            userIds: []
          }
      }
  },
  created() {
      this.getDicts('is_read').then(response => {
        this.isReadOptions = response.data
      })
      this.getList()
  },
  methods: {
    save(item, index) {
      this.form.primaryId = item.id
      this.form.userIds = item.userIds
      this.form.type = item.type
      this.form.component = item.component
      this.form.dataId = item.dataId
      this.form.content = item.remark

      // this.form.title = '回复Re：' + title
      if (item.title.indexOf(this.$t('回复Re：')) === -1) {
        this.form.title = this.$t('回复Re：') + item.title
      } else {
        this.form.title = item.title
      }
      if (item.userIds && item.userIds.length === 0) {
        this.msgError(this.$t('请勾选用户'))
      } else if (this.form.content === undefined || this.form.content === '') {
        this.msgError(this.$t('请填写回复内容'))
      } else {
        this.$confirm(this.$t('是否进行提交评论'), this.$t('提示'), {
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消'),
          type: 'warning'
        }).then(() => {
          saveMsgBase(this.form).then(res => {
            if (res.code !== 200) {
              this.msgError(res.msg)
            } else {
              this.msgSuccess(this.$t('发送成功'))
              this.form = {}
              this.msgBaseList[index].remark = ''
            }
          })
        }).catch(() => {
        })
      }
    },
    /** 查询系统消息列表 */
    getList() {
        this.loading = true
        listMsgBase(this.queryParams).then(response => {
            this.msgBaseList = response.rows
            this.total = response.total
            this.$forceUpdate()
            this.loading = false
        })
    },
    // 表单重置
    reset() {
        this.form = {
            id: undefined,
            userId: undefined,
            title: undefined,
            content: undefined,
            status: '0',
            component: undefined,
            dataId: undefined,
            createBy: undefined,
            createTime: undefined,
            updateBy: undefined,
            updateTime: undefined,
            delFlag: undefined
        }
        this.resetForm('form')
    },
    /** 搜索按钮操作 */
    queryHandle() {
        this.queryParams.pageNum = 1
        this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
        this.resetForm('queryForm')
        this.queryHandle()
    },
    /** 重置按钮操作 */
    updataOneKeyRead() {
      // 修改状态
      updataOneKeyReadMsgBase().then(response => {
        if (response.code === 200) {
          this.msgSuccess('一键已读成功')
        } else {
          this.msgError('一键已读失败')
        }
      })
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 修改按钮操作 */
    updateHandle(row) {
      this.title = row.title
      if (row.openComponent !== 'Y') {
        this.formOpen = true
        row.status = 'Y'
        this.$nextTick(() => {
          // 调用form页面的 init 方法初始化数据
          this.$refs.msgBaseForm.init(row)
        })
      } else {
        this.otherOpen = true
        this.formPath = getAsyncComponent(row.component)
        this.$bus.$once('async_done', () => {
          this.$nextTick(() => {
            if (this.$refs.formPath?.init !== undefined) {
              this.$refs.formPath.init(row.dataId)
            }
          })
        })
      }
    },
    isReadFormat(row) {
      return this.selectDictLabel(this.isReadOptions, row.status)
    },
    // 页面关闭事件
    handleDialogClose() {
      this.getList()
      this.formOpen = this.otherOpen = false
    },
    // 是否显示
    isShowPage(flag) {
      this.formOpen = flag
    },
    // 下个未读
    nextMsg() {
      nextUnreadMsg().then((res) => {
        if (res.data === null || res.data === undefined || res === '') {
          this.msgSuccess(this.$t('已全部阅读'))
        } else {
          this.updateHandle(res.data)
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.appengForm{
  height: 500px;
}
.pad{
  padding: 0 15px;
}
/deep/.con{
  width: 100%;
  position: relative;
  line-height: 22px;
  span{
    white-space:pre-wrap!important;
  }
  p{
    word-break: break-all;
    margin: 0;
  }
  img{
    width: 100%;
  }
}
</style>
